<style lang="scss" scoped>
    .login{
        height: 100vh;
        overflow: hidden;
        .head{
            width: 100%;
            height: 25vh;
            padding-bottom: 10vh;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: linear-gradient(to bottom, rgb(50, 134, 255), rgb(29, 70, 245));;
            img{
                width: 90px;
                height: 90px;
                border-radius: 50%;
            }
            div{
                position: absolute;
                background-color: #fff;
                height: 200px;
                &:nth-child(2){
                    width: 111px;
                    height: 200px;
                    background-color: #fff;
                    top: 160px;
                    border-radius: 50%;
                    left: -74px;
                }
                &:nth-child(3){
                    width: 161px;
                    height: 200px;
                    background-color: #fff;
                    top: 183px;
                    border-radius: 50%;
                    left: -15px;
                }
                &:nth-child(4){
                    width: 227px;
                    height: 200px;
                    background-color: #fff;
                    top: 186px;
                    border-radius: 50%;
                    left: 83px;
                }
                &:nth-child(5){
                    width: 161px;
                    height: 200px;
                    background-color: #fff;
                    top: 183px;
                    border-radius: 50%;
                    right: -6px;
                }
                &:nth-child(6){
                    width: 111px;
                    height: 200px;
                    background-color: #fff;
                    top: 169px;
                    border-radius: 50%;
                    right: -70px;
                }
            }
        }
        .list{
            padding: 0 4%;
            position: relative;
            z-index: 1;
            .item{
                width: 96%;
                height: 45px;
                line-height: 45px;
                padding: 5px 2%;
                border-bottom: 1px solid #ccc;
            }
        }
        .btn{
            padding: 0 4%;
            margin-top: 25px;
            text-align: center;
            a{
                color: #2d8cf0;
            }
        }
    }
</style>
<template>
    <div class="login">
        <div class="head">
            <img src="../../assets/logo.jpg" alt="">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="list">
            <div class="item" v-for="item in arr" :key="item.key">
                <p-input
                    :icon="item.icon"
                    v-model="obj[item.key]" 
                    :placeholder="item.placeholder" 
                    :type="item.type"
                    :img="item.show === true ? ercodes.data : ''"
                    @toggleCode="log"
                />
            </div>
        </div>
        <!-- 
            <van-button round type="info" block>登录</van-button> 
            相当于
            <van-button :round="true" type="info" :block="true">登录</van-button>
        -->
        <div class="btn">
            <van-button @click="submit()" round type="info" block>注册</van-button>
        </div>
        <div class="btn">
            <router-link to="/login">
                已有帐号，去登录
            </router-link>
        </div>
    </div>
</template>
<script>
// 导入获取验证码的接口
import {
    register
} from '@/api'
// 引入混入对象
import myMixin from '@/mixin'
export default {
    // 使用混入对象
    mixins: [myMixin],
    methods: {
        log(){
            // 重新调用获取验证码图片接口
            this.getCodeFun()
        },
        ajax(){
            // XMLHttpRequest()  浏览器自带的网络请求对象
            // js原生ajax写法
            // 1. 创建xml请求对象
            // let ajax = new XMLHttpRequest();
            // // 2. 打开ajax链接
            // ajax.open('请求方式method (get,post)','请求地址url  https://www.baidu.com')
            // // 3. 发送参数
            // ajax.send('字符串格式')
            // // 4. 监听ajax请求的进度
            // ajax.onreadystatechange = function () {
                // 处理数据  处理服务端响应的参数
            // }

            // let ajax = new XMLHttpRequest();
            // ajax.open('get','https://www.baidu.com/s')
            // ajax.send('{wd:"前端工程师"}');
        },
        submit(){
            // 验证手机号
            if(!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(this.obj.loginPhone)){
                // 使用全局的vant轻提示插件
                this.$toast('手机号不合法');
                return
            }
            // 验证密码
            if(this.obj.loginPassword.length < 6){
                // 使用全局的vant轻提示插件
                this.$toast('密码不能少于6位');
                return
            }
            // 验证两次密码输入是否一致
            if(this.obj.loginPassword != this.obj.loginRePassword){
                // 使用全局的vant轻提示插件
                this.$toast('两次密码输入不一致');
                return
            }
            // 验证码
            if(this.obj.ercode.toLowerCase() != this.ercodes.text.toLowerCase()){
                // 使用全局的vant轻提示插件
                this.$toast('验证码错误');
                // 重新调用验证码接口
                this.getCodeFun()
                return
            }
            // 数据验证完成之后 进行注册操作
            register(this.obj).then(res => {
                // 处理服务端响应的数据
                // console.log(res.data);
                if(res.data.code === 1){
                    // vant提示
                    this.$toast(res.data.msg)
                    // 注册成功的操作
                    // 倒计时器
                    setTimeout(() => {
                        // 使用编程式导航跳转路由
                        this.$router.push('/login')
                        /* 
                            this.$router.push(option)
                            option 参数
                                可以是 路由地址 /login
                                可以是 路由对象参数
                                 {
                                    path: '/login'
                                 }或者
                                 {
                                    name: 'login'
                                 }
                                如果需要给页面传递参数
                                {
                                    path: '/login',
                                    // 路由传递参数
                                    params: {
                                        loginPhone: '123455'
                                    }
                                }
                        */
                    }, 1500);
                }else{
                    // vant提示
                    this.$toast(res.data.msg)
                }
            })
        }
    },  
    data() {
        return {
            arr: [
                {
                    icon: require('../../assets/user/phone.png'),
                    // key
                    key: 'loginPhone',
                    placeholder: '请输入手机号',
                    type: 'text',
                    // 是否显示右边的图片
                    show: false
                },
                {
                    icon: require('../../assets/user/password.png'),
                    // key
                    key: 'loginPassword',
                    placeholder: '请输入密码',
                    type: 'password',
                    // 是否显示右边的图片
                    show: false
                },
                {
                    icon: require('../../assets/user/password.png'),
                    // key
                    key: 'loginRePassword',
                    placeholder: '请输入确认密码',
                    type: 'password',
                    // 是否显示右边的图片
                    show: false
                },
                {
                    icon: require('../../assets/user/ercode.png'),
                    // key
                    key: 'ercode',
                    placeholder: '请输入验证码',
                    type: 'text',
                    // 是否显示右边的图片
                    show: true
                }
            ],
            // 最后验证的数据
            obj: {
                loginPhone: '',
                loginPassword: '',
                loginRePassword:'',
                ercode: ''
            }
        }
    },
}
</script>